/**
 * 类似华为手机的下拉刷新
 */
import React, { Component } from 'react';
import { View, Text, Animated, Easing, Platform, Image, NativeModules } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import MJRefresh from 'react-native-mjrefresh';
import { SkypeIndicator } from 'react-native-indicators';
import Images from '../constants/Images';
import adapt from '../utils/adapt';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);

export default class RefreshControlComponent extends Component {
  state = {
    text: '下拉推荐',
    rotate: new Animated.Value(0),
    refreshing: false
  }
  _onReleaseToRefresh = () => {
    let isMoreThan7 = (Platform.OS == 'ios') && DeviceInfo.getDeviceId().split(',')[0].split('iPhone')[1] >= 7;
    isMoreThan7 && NativeModules.lightclick.addEvent('light', (result) => { }); // 轻度点击light 中度点击medium 重度点击heavy
    this.setState({ text: '松开推荐' });
    Animated.timing(this.state.rotate, { toValue: 1, duration: 197, useNativeDriver: true, easing: Easing.linear() }).start();
  }
  _onRefresh = () => {
    this.setState({ finishStatus: false, refreshing: true, text: '推荐中' });
    this.props.onRefresh && this.props.onRefresh();
  }
  _onPulling = (e) => {
    if (e.nativeEvent.percent == 0) {
      this.setState({ finishStatus: false, text: '下拉推荐', refreshing: false });
      Animated.timing(this.state.rotate, { toValue: 0, duration: 197, useNativeDriver: true, easing: Easing.linear() }).start();
    }
  }
  _onRefeshIdle = () => {
    this.setState({ finishStatus: true });
  }
  finishRefresh = () => {
    this._mjrefresh && this._mjrefresh.finishRefresh();
  }
  beginRefresh = () => {
    this._mjrefresh && this._mjrefresh.beginRefresh();
  }
  shouldComponentUpdate(nextState, nextProps) {
    return nextState.finishStatus !== this.state.finishStatus ||
      nextState.text !== this.state.text || nextState.rotate !== this.state.rotate ||
      nextProps.onRefresh !== this.props.onRefresh || nextState.refreshing !== this.state.refreshing;
  }
  render() {
    return (
      <MJRefresh
        onRefreshIdle={this._onRefeshIdle}
        ref={ref => this._mjrefresh = ref}
        onReleaseToRefresh={this._onReleaseToRefresh}
        onRefresh={this._onRefresh}
        onPulling={this._onPulling}>
        <View style={{
          height: adapt(100),
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          {this.state.refreshing ? <SkypeIndicator style={{ flex: 0 }} size={adapt(24)} color={themeColor} /> :
            !this.state.finishStatus && <AnimatedIcon style={{
              transform: [{
                rotate: this.state.rotate.interpolate({
                  inputRange: [0, 1],
                  outputRange: ['180deg', '0deg']
                })
              }]
            }} name="md-arrow-up" color={themeColor} size={adapt(24)} />}
          {!this.state.finishStatus && <Text style={{ marginLeft: adapt(15), color: themeColor }}>{this.state.text}</Text>}
        </View>
      </MJRefresh>
    )
  }
}